<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('基金管理')" ></head>



<body class="hold-transition skin-blue  layout-boxed">

<script>
    $(function(){
        var data4Vue = {
                uri:'funds',
                uri4stastic:'stastic',
                uri4index:"indexs",
                uri4user:"users",
                beans: [],
                indexs:[],
                users:[],
                theStastic:{currents:'10000000',profits:'-10000'},
                bean: { id: 0, name: '', code:'', index:{id:0}, user:{id:0} },
                bean4update: { id: 0, name: '', code:'', index:{id:0}, user:{id:0} },
                pagination:{},
                file: null,
                indexSelected:'',
                code:'',
                sortByCodeDesc:true,
                sortByCurrentDesc:true,
                sortByProfitDesc:true,
                selectedUserId:[],
                changedUser:false,
            };

            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                	
                    this.list(0);
                    
                },
                methods: {
                	sort:function(by){
                		var url;
                		var dir="desc";
                		if("code"==by){
                			this.sortByCodeDesc = !this.sortByCodeDesc;
                			dir = this.sortByCodeDesc?"desc":"asc";
                		}
                		if("current"==by){
                			this.sortByCurrentDesc = !this.sortByCurrentDesc;
                			dir = this.sortByCurrentDesc?"desc":"asc";
                		}
                		if("profit"==by){
                			this.sortByProfitDesc = !this.sortByProfitDesc;
                			dir = this.sortByProfitDesc?"desc":"asc";
                		}
                		
                		
                		
                		url =  this.uri+ "/sort?by="+by+"&dir="+dir+"&start=0&size=1000";
                		console.log(url);
                        axios.get(url).then(function(response) {
                            vue.pagination = response.data;
                            vue.beans = response.data.content;
                            vue.getStastic();
                        });
                	},
                    list:function(start){
                        var url =  this.uri+ "?start="+start+"&size=1000";
                        axios.get(url).then(function(response) {
                            vue.pagination = response.data;
                            vue.beans = response.data.content;
                            vue.getStastic();
                        });
                        var url4index =  this.uri4index+ "?start="+start+"&size=1000";
                        axios.get(url4index).then(function(response) {
                            vue.pagination = response.data;
                            vue.indexs = response.data.content;
                            if(vue.indexs.length==0){
                            	alert("至少要有一条指数数据");
                            	location = "admin_index_list";
                            	return;
                            }
                            	
//                             console.log(vue.indexs);
                        	vue.bean.index.id = vue.indexs[0].id;
//                         	vue.bean.index.id = vue.index[0].id;
                        });
                        var url4user =  this.uri4user+ "?start="+start+"&size=1000";
                        axios.get(url4user).then(function(response) {
                            vue.pagination = response.data;
                            vue.users = response.data.content;
                            if(vue.users.length==0){
                            	alert("至少要有一条用户数据");
                            	location = "admin_user_list";
                            	return;
                            }
//                             console.log(vue.indexs);
                        	vue.bean.user.id = vue.users[0].id;
                        });
                    },

                    getStastic:function(){
//                         var url =  this.uri4stastic;
//                         axios.get(url).then(function(response) {
//                         	console.log(response.data.data);
//                             vue.theStastic = response.data.data;
//                         });         

					   var currents = 0;
					   var profits = 0;
					   for(i in vue.beans){
						   var bean = vue.beans[i];   
						   var found =false;
						   
						   if(!vue.changedUser)
							   found = true;
						   else{
							   for(j in vue.selectedUserId){
								   var uid = vue.selectedUserId[j];
								   if(uid == bean.user.id){
									   found = true;
									   break;
								   }
							   }							   
						   }

						   
						   if(found){
							   currents+=bean.current;
							   profits+=bean.profit;
						   }
						   
						   	
						   
						   
					   }
					   vue.theStastic.currents = currents;
					   vue.theStastic.profits = profits;
                    	
					   vue.theStastic.rate = 100*vue.theStastic.profits/(vue.theStastic.currents-vue.theStastic.profits);    			
					   console.log("vue.theStastic.profits:"+vue.theStastic.profits);
								



                    },
                    add: function () {
                        if(!checkEmpty(this.bean.name, "基金名称"))
                            return;

                        var url = this.uri;
                        axios.post(url,this.bean).then(function(response){
                            vue.list(0);
                            vue.bean = { id: 0, name: '', code: '', index:{id:0}, user:{id:0} };
                            $("#fundPic").val('');
                            vue.file = null;
                            document.getElementById("nameInput").focus();
                        });
                        
                        
                    },
                    get:function(id){
                        var url = this.uri+"/"+id;
                        axios.get(url).then(function(response) {
                            vue.bean4update = response.data;
                        });
                        $("#modal4edit").modal('show');
                    },
                    cancleEdit:function(){
                    },
                    update:function () {
                        if(!checkEmpty(this.bean4update.name, "基金名称"))
                            return;
                        if(!checkEmpty(this.bean4update.code, "基金代码"))
                            return;
                        var url = this.uri+"/"+this.bean4update.id;

                        axios.put(url,this.bean4update).then(function(response){
                        	vue.list(0);
                            vue.bean4update = { id: 0, name: '', code: '', index:{id:0}, user:{id:0} };
                        });
                        $("#modal4edit").modal('hide');
                    },                    
                    deleteBean: function (id) {
                        if(!checkDeleteLink())
                            return;
                        var url = this.uri+"/"+id;
                        axios.delete(url).then(function(response){
                            if(0!=response.data.length){
                                alert(response.data);
                            }
                            else{
                                vue.list(0);
                            }
                        });
                    },
                    getFile: function (event) {
                        this.file = event.target.files[0];
                    },
                    changeMoney:function(fund,e){
                    	console.log(e);
                    	$(e.target).css("border","2px solid green");
                    	var url = this.uri+"/"+fund.id;
                    	axios.put(url,fund).then(function(){
                        	vue.getStastic();
                    	});
                    },
                    jump: function(page){
                        jump(page,vue); //定义在adminHeader.html 中
                    },
                    jumpByNumber: function(start){
                        jumpByNumber(start,vue);
                    },
                   	search:function(){
                        var url =  this.uri+ "/like?code="+this.code+"&start=0&size=1000";
                        axios.get(url).then(function(response) {
                            vue.pagination = response.data;
                            vue.beans = response.data.content;
                        });
                    },
                    selectUsers:function(){
                    	vue.changedUser = true;
                    	vue.selectedUserId.splice(0,vue.selectedUserId.length);
                    	var checkedUsers = 	$("input.userCheckbox:checked");
                    	$("tr.fundTR").hide();
                    	for(var i = 0; i<checkedUsers.length; i++){
                    		var checkedUser = checkedUsers[i];
                    		var uid = checkedUser.value;
                    		vue.selectedUserId.push(uid);

                    		$("tr.fundTR[uid="+uid+"]").show();
                    		
                    	}
                    	
                		console.log(vue.selectedUserId.length);
                		vue.getStastic();
                    }
                    
                }
            });    	
    	
    });

</script>

<div class="wrapper" id="workingArea">
  <div th:replace="include/admin/adminNavigator::html" ></div>
  <div th:replace="include/admin/adminSidebar::html" ></div>




  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        	基金管理
        <small>基金管理</small>
      </h1>
    </section>

    <section class="content">
    	<div class="row">
	    	<div class="col-lg-4 col-xs-6">
	          <!-- small box -->
	          <div class="small-box bg-aqua">
	            <div class="inner">
	              <h3>{{theStastic.currents|formatMoneyFilter}}</h3>
	
	              <p>总资产</p>
	            </div>
	            <div class="icon">
	              <i class="ion ion-cash"></i>
	            </div>
	          </div>
	        </div>
        
	        <div v-if="theStastic.profits>0" class="col-lg-4 col-xs-6">
	          <!-- small box -->
	          <div  class="small-box bg-green">
	            <div class="inner">
	              <h3>{{theStastic.profits|formatMoneyFilter}}</h3>
	
	              <p>总盈亏</p>
	            </div>
	            <div class="icon">
	              <i class="ion ion-cash"></i>
	            </div>
	          </div>
	        </div>
	        <div v-if="theStastic.profits<=0" class="col-lg-4 col-xs-6">
	          <!-- small box -->
	          <div  class="small-box bg-red">
	            <div class="inner">
	              <h3>{{theStastic.profits|formatMoneyFilter}}</h3>
	
	              <p>总盈亏</p>
	            </div>
	            <div class="icon">
	              <i class="ion ion-cash"></i>
	            </div>
	          </div>
	        </div>
	        
	        <div v-if="theStastic.rate>0" class="col-lg-4 col-xs-6">
	          <!-- small box -->
	          <div class="small-box bg-green">
	            <div class="inner">
	              <h3>{{theStastic.rate|formatMoneyFilter}}<sup style="font-size: 20px">%</sup></h3>
	
	              <p>收益率</p>
	            </div>
	            <div class="icon">
	              <i class="ion ion-stats-bars"></i>
	            </div>
<!-- 	            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> -->
	          </div>
	        </div>
	        <div v-if="theStastic.rate<=0" class="col-lg-4 col-xs-6">
	          <!-- small box -->
	          <div class="small-box bg-red">
	            <div class="inner">
	              <h3>{{theStastic.rate|formatMoneyFilter}}<sup style="font-size: 20px">%</sup></h3>
	
	              <p>收益率</p>
	            </div>
	            <div class="icon">
	              <i class="ion ion-stats-bars"></i>
	            </div>
<!-- 	            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> -->
	          </div>
	        </div>

		</div>
		
		
		<div class="row">
			<div class="col-xs-12">
				<div v-for="user in users" style="margin:20px auto 20px auto; display:block; width:100px;">
					<label class="text-muted" :for="'usreCheckBoxId'+user.id">{{user.name}}</label>
					<input :id="'usreCheckBoxId'+user.id"    @click="selectUsers" class="userCheckbox" checked="checked" :value="user.id" type="checkbox">
				</div>
			</div>
			
		</div>
		
		<div class="row">
	        <div class="col-xs-12">
	          <div class="box">
	            <div class="box-header">
	              <h3 class="box-title">基金清单</h3>
	
	              <div class="box-tools">
	                <div class="input-group input-group-sm" style="width: 150px;">
	                  <input @keyup="search" type="text" v-model.trim="code" name="table_search" class="form-control pull-right" placeholder="Search">
	
	                  <div class="input-group-btn">
	                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
	                  </div>
	                </div>
	              </div>
	            </div>
	            <!-- /.box-header -->
	            <div class="box-body table-responsive no-padding">
	              <table class="table table-hover">
	                <tbody><tr>
	                  <th class="thinth">id</th>
	                  <th style="width:200px">名称</th>
	                  <th>
	                  	<a href="#nowehre" @click="sort('code')">
	                  	      代码 
		                  <span v-if="sortByCodeDesc" class="fa fa-sort-amount-desc"></span>
		                  <span v-if="!sortByCodeDesc" class="fa fa-sort-amount-asc"></span>
		                </a>
	                  </th>
	                  <th>对应指数</th>
	                  <th>所属用户</th>
	                  <th>
	                  	<a href="#nowehre" @click="sort('current')">
	                  	  资产 
		                  <span v-if="sortByCurrentDesc" class="fa fa-sort-amount-desc"></span>
		                  <span v-if="!sortByCurrentDesc" class="fa fa-sort-amount-asc"></span>
		                </a>
	                  </th>
	                  <th>
	                  	<a href="#nowehre" @click="sort('profit')">
	                  	  盈亏
		                  <span v-if="sortByProfitDesc" class="fa fa-sort-amount-desc"></span>
		                  <span v-if="!sortByProfitDesc" class="fa fa-sort-amount-asc"></span>
		                </a>
	                  </th>	                  
	                  <th class="thinth">编辑</th>
	                  <th class="thinth">删除</th>
	                </tr>
	                
	                <template v-for="bean in beans ">
		                <tr rowspan="2" :uid="bean.user.id" checked="checked" class="fundTR" >
		                  <td>{{bean.id}}</td>
		                  <td>
			                  <a :title="bean.name" href="#nowhere" @click="get(bean.id)">
			                  	{{bean.name | shortStringFilter(12)}}
			                  </a>
		                  </td>
		                  <td>
		                  	   <a :title="bean.code" href="#nowhere" @click="get(bean.id)">
			                  	{{bean.code | shortStringFilter(25)}}
			                  </a>
		                  </td>
		                  <td>
		                  		<a :title="bean.index.name" href="#nowhere" @click="get(bean.id)">
		                  		{{bean.index.name}} ( {{bean.index.code}} )
		                  		</a>
		                  </td>
		                  <td>
		                  		<a :title="bean.user" href="#nowhere" @click="get(bean.id)">
		                  		{{bean.user.name}} 
		                  		</a>
		                  </td>
		                  <td>
		                  		<input style="width:100px" @keyup="changeMoney(bean,$event)" @change="changeMoney(bean,$event)" v-model.number="bean.current" type="number" >
		                  </td>
		                  <td>
		                  		<input style="width:100px" @keyup="changeMoney(bean,$event)" @change="changeMoney(bean,$event)" v-model.number="bean.profit" >
		                  </td>
		                  
							
						  <td>
		                    <a href="#nowhere" @click="get(bean.id)"><span class="glyphicon glyphicon-edit"></span></a>
        		          </td>
		                  <td>
	          		          <a href="#nowhere"  @click="deleteBean(bean.id)"><span class="   glyphicon glyphicon-trash"></span></a>
    		              </td>
		                </tr>

	                </template>
	                
	              </tbody></table>
	            </div>
	          </div>
	          
	          <div th:replace="include/admin/adminPage::html" ></div>
	          
	          <div class="box box-primary" style="width:580px;margin:10px auto">
		            <div class="box-header with-border">
		              <h3 class="box-title">新增基金</h3>
		            </div>
		
		           
		              <div class="box-body">
		                <div class="form-group">
		                  <label for="exampleInputEmail1">基金名称</label>
		                  <input id="nameInput" type="text" class="form-control" @keyup.enter="add" v-model.trim="bean.name" placeholder="名称">
		                </div>
		                <div class="form-group">
		                  <label for="exampleInputEmail1">基金代码</label>
		                  <input type="text" class="form-control" @keyup.enter="add" v-model.trim="bean.code" placeholder="代码">
		                </div>
		                <div class="form-group">
		                  <label for="exampleInputEmail1">指数代码</label>
		                  
		                  <select :size="indexs.length" style="margin:0px 0px" class="form-control" v-model="bean.index.id">
		                  	<option v-for="bean, index in indexs" :value="bean.id" >{{bean.code}} - {{bean.name}} </option>
		                  </select>
		                  
		                  
<!-- 		                  <template v-for="each in indexs "> -->
		                  
<!-- 		                  	<input type="radio" :id="'indexRadio4add'+each.id" :value="each.id" v-model="bean.index.id"> -->
<!--   							<label :for="'indexRadio4add'+each.id">{{each.code}} - {{each.name}}</label> -->
<!--   							<br> -->
  
<!-- 		                  </template> -->

		                </div>
		                
		                
		                
		                
		                
		                <div class="form-group">
		                  <label for="exampleInputEmail1">所属用户</label>
		                  
		                  <select  :size="users.length"  class="form-control" v-model="bean.user.id">
		                  	<option v-for="bean, index in users" :value="bean.id" >{{bean.name}} </option>
		                  </select>

		                </div>
		              </div>
		
		              <div class="box-footer">
		                <button type="button" @click="add" class="btn btn-primary">提交</button>
		              </div>
	          </div>
	          

	          
<!-- 		    <div class="panel panel-warning addDiv"> -->
<!-- 		        <div class="panel-heading">新增基金</div> -->
<!-- 		        <div class="panel-body"> -->
<!-- 		            <table class="addTable"> -->
<!-- 		                <tr> -->
<!-- 		                    <td>基金名称</td> -->
<!-- 		                    <td><input  @keyup.enter="add" v-model.trim="bean.name" type="text" class="form-control"></td> -->
<!-- 		                </tr> -->
<!-- 		                <tr> -->
<!-- 		                    <td>基金描述</td> -->
<!-- 		                    <td><input  @keyup.enter="add" v-model.trim="bean.text" type="text" class="form-control"></td> -->
<!-- 		                </tr> -->
<!-- 		                <tr class="submitTR"> -->
<!-- 		                    <td colspan="2" align="center"> -->
<!-- 		                        <a href="#nowhere"  @click="add" class="btn btn-success">提交</a> -->
<!-- 		                    </td> -->
<!-- 		                </tr> -->
<!-- 		            </table> -->
<!-- 		        </div> -->
<!-- 		    </div>		           -->
	          
	        </div>
	       
	       
		<div class="modal modal-default fade" id="modal4edit">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span></button>
                <h4 class="modal-title">修改基金</h4>
              </div>
              <div class="modal-body">
	          <div class="box box-info" style="width:580px;margin:10px auto">
		            <div class="box-header with-border">
		              <h3 class="box-title">修改基金</h3>
		            </div>
		
		           
		              <div class="box-body">
		                <div class="form-group">
		                  <label for="exampleInputEmail1">基金名称</label>
		                  <input type="text" class="form-control" @keyup.enter1="update" v-model.trim="bean4update.name" placeholder="名称">
		                </div>
		                
		                <div class="form-group">
		                  <label for="exampleInputEmail1">基金代码</label>
		                  <input type="text" class="form-control" @keyup.enter1="update" v-model.trim="bean4update.code" placeholder="代码">
		                </div>
			              <div class="form-group">
			                  <label for="exampleInputEmail1">指数代码</label>
			                  
			                  <select  :size="indexs.length" class="form-control" v-model="bean4update.index.id">
			                  	<option v-for="bean, index in indexs" :value="bean.id" >{{bean.code}} - {{bean.id}} - {{bean.name}} </option>
			                  </select>
	
			              </div>
			              
			                <div class="form-group">
			                  <label for="exampleInputEmail1">所属用户</label>
			                  
			                  <select  :size="users.length" class="form-control" v-model="bean4update.user.id">
			                  	<option v-for="bean, index in users" :value="bean.id" >{{bean.name}} </option>
			                  </select>
	
			                </div>			              		              
				      </div>
		              <div class="box-footer">
<!-- 		                <button type="button" @click="update" class="btn btn-primary">提交</button> -->
<!-- 		                <button type="button" @click="cancleEdit" class="btn btn-primary">取消</button> -->
		              </div>
	          </div>
              </div>
              <div class="modal-footer">
                <button type="button" @click="cancleEdit" class="btn btn-primary pull-left" data-dismiss="modal">关闭</button>
                <button type="button" @click="update" class="btn btn-primary">提交</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>	       
        
	        
	      </div>
    </section>
  </div>
	<div th:replace="include/admin/adminFooter::html" ></div>
</div>


</body>
</html>
